<template>
	<div class="homebox">
		<Tabbar :leftArrow='true' :title="$t('textTrans.充值')" :hidden='false'></Tabbar>
		<div style="display: flex;justify-content: center;margin-top: 20px;">
			<div id="qrcode"></div>

		</div>
	<!-- 	<div style="font-size: 15px;text-align: center;">

			<div style="font-size: 17px;margin: 20px 0 15px 0;">{{$t('textTrans.地址')}}</div>
			<div style="color: #00A170;">{{account[2]}} TRX</div>
		</div> -->

		<div class="share-back">
			<div style="background:white;padding:10px 15px;border-radius:25px;margin-top:15px;font-size:13px;display: flex;justify-content: space-between;" >
				<div style="width: 170px;overflow: auto;">{{copyContent}}</div>
				<van-button type="primary" :data-clipboard-text="copyContent" data-clipboard-action="copy"
					id="copyBtn" size="mini" color='#00A170' round> {{$t('textTrans.复制链接')}}</van-button>
			</div>
			<!-- 	<van-cell style="width: 100%;border-radius: 25px;" :title="copyContent">
				<template #right-icon>
					<van-button type="primary" :data-clipboard-text="copyContent" data-clipboard-action="copy"
						id="copyBtn" size="mini" color='#00A170' round> {{$t('textTrans.复制链接')}}</van-button>
				</template>
			</van-cell> -->
			<div style="background:white;padding:10px 15px;border-radius:25px;margin-top:15px;font-size:13px">
<div >{{$t('textTrans.充值一')}}</div>
			<div style="margin: 15px 0;font-size:13px;color:#00A170">{{$t('textTrans.充值二')}}</div>
				<van-button class="loginBtn" @click="submitReg">{{$t('textTrans.充值完成')}}</van-button>

			</div>
			
		
		</div>
		   <!-- <button
        style="
          border: none;
          color: #fff;
          width: 82%;
          font-size: 17px;
          border-radius: 25px;
          margin: 10px auto;
          position: absolute;
          bottom: 1%;
          left: 50%;
          transform: translateX(-50%);
        "
        id="copyBtn"
		class="loginBtn"
        data-clipboard-action="copy"
        :data-clipboard-text="copyContent"
      >
        
		{{$t('textTrans.分享邀请')}}
      </button> -->
	</div>
	</div>
</template>
<script>
import QRCode from "qrcodejs2";
import Clipboard from "clipboard";
import { userInfo, userwallet,account } from "@/api/personal";
export default {
  data() {
    return {
      data: [],
      locale: "en",
      copyContent: "",
	  account:{},
      uuid: "",
      codeArr: [],
    };
  },
  created(){
	  account().then(res=>{
		  this.account =res
	  })
  },
  mounted() {
    this.getData();
    let _this = this;
    const clipboard = new Clipboard("#copyBtn");
    clipboard.on("success", function () {
      _this.$toast("Copy succeeded");
    });
    clipboard.on("error", function () {
      this.$toast("copy failed");
    });
  },
  methods: {
	  submitReg(){
		  this.$toast.success('')
		  setTimeout(()=>{
			  this.$router.push('mall')
		  },600)
	  },
    onClickLeft() {
      this.$router.go(-1);
    },
    getData() {
      userwallet({type:this.$route.query.type}).then((res) => {
      // this.data = res;
	  console.log(res)
      this.copyContent = res.address;
      // this.codeArr = res.uuid.split("");
      this.qrcode();
      });
    },
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 110, // 设置宽度，单位像素
        height: 110, // 设置高度，单位像素
        render: "table",
        text: this.copyContent, // 二维码内容
      });
    },
  },
};
</script>
<style lang="less" scoped>
.share-back {
  box-sizing: border-box;
  padding: 20px;
  font-size: 15px;
  color: #333;
  width: 90%;
  margin: 50px auto;
  background: #B5F3EA;
  border-radius: 25px;
}

.homebox {
  width: 100%;
  height: 100%;
  position: relative;
}

/deep/#qrcode {
  display: flex;
  justify-content: space-between;
  text-align: center;
  border-radius: 8px;
  border: 9px solid #B5F3EA;
  // padding: 14px;

  img {
    text-align: center;
    width: 110px;
    height: 110px;
  }
}

.van-nav-bar {
  background: transparent;
  border: none;

  /deep/.van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-icon {
    color: #fff;
  }
}

#copyCode {
  border: 0 none;
  background: transparent;
}
</style>
